<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>获取宽高，在元素内动态添加/删除元素</title>
	<script src="jquery-1.11.1.min.js"></script>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		div{
			background-color: red;
		}
	</style>
</head>
<body>
	<div></div>
	<script>
		//width()获取置顶元素的宽度，数值型
		//innerWidth()算上padding的宽度
		//outerWidth()加上padding和border的宽度
		$(function(){
			$("div").width("200").height("200").innerWidth("400").outerWidth("800");
		})
		//append()在元素的末尾添加 apendTo()添加到xxx的末尾
		//prepend()在元素的开头添加 prependTo()添加到xxx的开头
		//动态创建的元素之间可以互相嵌套操作
		$("<ul id='nav' />").appendTo("body");
		$("<li />").appendTo($("ul"));
		$("<span />").html("你好").appendTo($("li"));
		$("<button />").html("删除").appendTo($("li"));
	</script>
</body>
</html>